<template>
	<view class="container" @click="toDetail">
		<image :src="product.image" mode="aspectFill" class="img"></image>
		<view class="text">
			<view class="name ell">{{product.name}}</view>
			<view class="specifications ell" v-if="product.price==0">免费</view>
			<view class="specifications ell" v-else>￥{{product.price}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			product: {
				type: Object,
				value: {}
			},
			type: {
				type: Number,
				value: 0,
			},
			details: {
				type: Object,
				value: {},
			}
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			// details(productId) {
			// 	uni.navigateTo({
			// 		url: `/pages/product-details/index?productId=${productId}&loginType=1`
			// 	})
			// },
			toDetail() {
				if (this.type == 1) {
					uni.navigateTo({
						url: `/pages/store/supermarket?imgPath=${encodeURIComponent(this.details.infoImage)}&shopId=${this.details.id}`
					})
				} else if (this.type == 2) {
					uni.navigateTo({
						url: `/pages/store/business-services?details=${encodeURIComponent(JSON.stringify(this.details))}&shopId=${this.details.id}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 19rpx 20rpx 14rpx;

		.img {
			display: block;
			margin: 0 auto;
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			background-color: #F5F5F5;
			background-color: #F5F5F5;
		}

		.text {
			padding-top: 19rpx;
			margin: 0 auto;
			width: 180rpx;

			.name {
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #080808;
			}

			.specifications {
				margin-top: 5rpx;
				line-height: 35rpx;
				font-size: 30rpx;
				font-weight: 600;
				text-align: right;
				color: red;
			}
		}
	}
</style>
